/*
* @Author: Yejing
* @Date: 2023-05-30 16:55:55
* @LastEditor: fengjie
* @LastEditTime: 2023-11-10 11:22:34
* @Description: desc
*/
<template>
	<view class="title-input" :style="isFocus?'border-color:'+focusColor:''">
		<text :style="isFocus?'color:'+focusColor:''" class="title">{{title}}</text>
		<view class="input-body" v-if="type!=='number'" >
			<view class="left-icon" v-if="$slots['left-icon']">
				<slot name="left-icon" ></slot>
			</view>
			<input  :focus="isFocus" ref="input" @confirm="$emit('enter')" @focus="inputFocus(true)" type="text" @blur="inputFocus(false)"
				:password="type === 'password' && showPassword" @input="changeInput" v-model="values" :placeholder="pla"
				:maxlength="~~maxlength" :disabled="disabled" :style="inputStyle"  :inputmode="inputmode"/>
			<view class="input-btn" v-if="type === 'password'">
				<image @click="changePassword" style="width: 60rpx;height: 60rpx;" 
					:src="require(`@/static/images/login/eye-${showPassword?'close':'open'}.png`)" mode=""></image>
			</view>
			<view class="right-icon" v-if="$slots['right-icon']">
				<slot name="right-icon"></slot>
			</view>
		</view>
		<view class="input-body" v-else>
			<view class="left-icon" v-if="$slots['left-icon']">
				<slot name="left-icon"></slot>
			</view>
			<input @focus="inputFocus(true)" type="number"  @blur="inputFocus(false)" @input="changeInput"
				v-model="values" :placeholder="pla" :maxlength="~~maxlength" :disabled="disabled" :style="inputStyle" />

			<view class="right-icon" v-if="$slots['right-icon']">
				<slot name="right-icon"></slot>
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * imageForSize 输入框组件
	 * @description 便于输入框样式修改的思路而设计的组件
	 * @property {String} title 输入框上方文字显示
	 * @property {String} type uni原生属性
	 * @property {Boolean} showPsd 显示密码操作
	 * @property {String} src 图片路径
	 * @property {String | Number} value v-model绑定的值
	 * @property {String} focusColor 输入框聚焦时的颜色
	 * @property {String} pla uni原生输入框提示文本
	 */
	export default {
		name: "titleInput",
		props: {
			title: {
				default: '',
				type: String
			},
			type: {
				default: 'text',
				type: String
			},
			prop: {
				default: '',
				type: String
			},
			showPsd: {
				default: false,
				type: Boolean
			},
			value: {
				default: '',
				type: String | Number
			},
			focusColor: {
				default: '#2934D0',
				type: String
			},
			pla: {
				default: "",
				type: String
			},
			disabled: {
				default: false,
				type: Boolean | String
			},
			maxlength: {
				default: 100,
				type: Number | String
			},
			paddingLeft: {
				default: '180rpx',
				type: Number | String
			},
			rule: {
				default: null
			},
			inputmode:{
				default: 'text',
				type:  String
			},
		},
		model: {
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		data() {
			return {
				showPassword: true,
				isFocus: false,
			};
		},
		computed: {
			inputStyle() {
				return {
					paddingLeft: this.$slots['left-icon'] ? this.paddingLeft : '40rpx',
					paddingright: this.$slots['right-icon'] ? '80rpx' : '40rpx'
				}
			},
			values: {
				get(val) {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
					if (this.rule) {
						const reg = new RegExp(this.rule, 'g')
						if (reg && reg.test(val)) {
							this.$nextTick(() => {
								this.$emit('input', val.replace(reg, ''))
							})
						}
					}

				},
			},
		},
		methods: {
			changePassword() {
				this.showPassword = !this.showPassword
			},
			changeInput(event) {
				// event.target.value = this.value
				//  event.returnValue=false
				// this.$nextTick(()=>{
				// 	this.values = event.detail.value.replace(/[\W]/g,'')
				// })
				// setTimeout(()=>{
				// 	event.returnValue = false
				// 	event.target.value = ''
				// 	this.values = ''
				// 	this.$forceUpdate()
				// },1000)
				// console.log( event.target.value)
			},
			inputFocus(val) {
				this.isFocus = val
			},
			accountNumInput(event) {
				const target = event.detail;
				const inputRule = /[\W]/g //只能输入数字和字母
				this.$nextTick(() => {
					this.from.arr1.name = target.value.replace(inputRule, '');
				})
			},
			keypress(key) {
				// arguments.forEach(ele=>{
				// 	console.log(ele);
				// })
				console.log(key.key);
				// if(event.keyCode == 32)event.returnValue = false;
			},
			focus() {
				this.isFocus = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-input {
		position: relative;
		border-radius: 30rpx;
		border: 2rpx solid #E8E6EA;
		transition: .2s;
		line-height: normal;

		.uni-input {}

		.title {
			font-family: SFUIDisplay-Regular, SFUIDisplay;
			position: absolute;
			top: 0rpx;
			left: 15rpx;
			transform: translate(0, -50%);
			background-color: #fff;
			font-size: 24rpx;
			color: #999CAD;
			padding: 0 16rpx;

		}

		.input-body {
			position: relative;

			.left-icon {
				position: absolute;
				left: 20rpx;
				top: 35%;
			}

			uni-input {
				padding: 40rpx;
				box-sizing: content-box;
			}

			.input-btn {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
			}

			.right-icon {
				position: absolute;
				right: 0px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>